<template>
	<!-- 底部购物栏 -->
	<view class="btm_tool">
		<view class="tool_item price">
			<view class="iconfont icon-kefu"></view>
			<view>
				合计:<text>￥{{ totalPrice }} </text>
			</view>
			<button open-type="contact"></button>
		</view>
		<view class="tool_item btn_buy" @click="submitOrder">
			立即购买
		</view>
	</view>
</template>

<script>
	import {
		submitOrderApi
	} from "@/http/order.js"

	export default {
		props: {
			totalPrice: 0,
			goodsId: null
		},
		methods: {
			// 提交顶单
			async submitOrder() {
				if (!this.goodsId) return;
				//  locading
				uni.showLoading({
					title: '请稍等....',
					mask: true
				})
				setTimeout( async () => {
					
					// 请求

					const res = await submitOrderApi({
						goodsId: this.goodsId
					});
					if (res) {
						// 
						uni.hideLoading()
						// 支付成功
						uni.showToast({
							title: "支付成功",
							icon: 'success',
							duration: 2000,
							success() {
								// 提交成功 跳转到订单页面
								setTimeout(() => {

									uni.redirectTo({
										url: "/pages/order/order"
									})
								}, 2000)
							}
						})

					}

				}, 1500)


			}
		}
	}
</script>

<style lang="less" scoped>
	.btm_tool {
		// 固定位置
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		background-color: #f6f5f8;
		display: flex;
		// 上上边框
		border-top: 1rpx solid #ccc;

		.tool_item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// 相对定位
			position: relative;

			button {
				// 绝对定位
				position: absolute;
				width: 100%;
				height: 100%;
				// 透明
				opacity: 0;
			}
		}

		.price {
			flex: 3;
			font-size: 38rpx;
			display: flex;
			align-items: center;

			text {
				color: #ff5500;
			}
		}

		.btn_buy {
			flex: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #5ca45b;
			color: aliceblue;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
</style>